<template>
  <div>
    <v-layout class="px-3 pb-2">
      <v-flex xs2>
        <v-btn color="info">新增品牌</v-btn>
      </v-flex>
      <v-spacer/> <!-- 栅格布局默认12，这里上下只用了6，这个用来占空间，让他们左右分割-->
      <v-flex xs4>
        <!--搜索文本框，并累加了一个图标-->
        <v-text-field label="搜索" hide-details append-icon="search" v-model="key"/>
      </v-flex>
    </v-layout>
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center">
          <img :src="props.item.image" alt="">
        </td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="text-xs-center">
          <v-btn flat icon color="info">
            <v-icon>edit</v-icon>
          </v-btn>
          <v-btn flat icon color="error">
            <v-icon>delete</v-icon>
          </v-btn>
        </td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
  export default {
    name: "MyBrand",
    data() {
      return {
        headers: [
          {text: "品牌id", value: "id", align: 'center', sortable: true},
          {text: "品牌名称", value: "name", align: 'center', sortable: false},
          {text: "品牌LOGO", value: "image", align: 'center', sortable: false},
          {text: "品牌首字母", value: "letter", align: 'center', sortable: true},
          {text: "操作", align: 'center', sortable: false},
        ],
        brands: [], //品牌信息
        pagination: {}, //分页信息
        totalBrands: 0, //每页条数
        loading: false, //显示进度条，每次加载数据完成之前显示
        key: "",  //搜索条件
      }
    },
    created() {
      //这里弄得假品牌信息
      this.brands = [
        {
          "id": 2032,
          "name": "OPPO",
          "image": "http://img10.360buyimg.com/popshop/jfs/t2119/133/2264148064/4303/b8ab3755/56b2f385N8e4eb051.jpg",
          "letter": "O"
        },
        {
          "id": 2033,
          "name": "飞利浦（PHILIPS）",
          "image": "http://img12.360buyimg.com/popshop/jfs/t18361/122/1318410299/1870/36fe70c9/5ac43a4dNa44a0ce0.jpg",
          "letter": "F"
        },
        {
          "id": 2034,
          "name": "华为（HUAWEI）",
          "image": "http://img10.360buyimg.com/popshop/jfs/t5662/36/8888655583/7806/1c629c01/598033b4Nd6055897.jpg",
          "letter": "H"
        },
        {
          "id": 2036,
          "name": "酷派（Coolpad）",
          "image": "http://img10.360buyimg.com/popshop/jfs/t2521/347/883897149/3732/91c917ec/5670cf96Ncffa2ae6.jpg",
          "letter": "K"
        },
        {
          "id": 2037,
          "name": "魅族（MEIZU）",
          "image": "http://img13.360buyimg.com/popshop/jfs/t3511/131/31887105/4943/48f83fa9/57fdf4b8N6e95624d.jpg",
          "letter": "M"
        }
      ];
      this.totalBrands = 15;

      //去后台查询
      this.loadBrands();
    },
    watch: {  //监控：因为搜索文本框绑定了v-model,所以这里监控，实时去后台查品牌信息
      key() { //监听key一旦改变就触发这个方法
        //每次监听到key变化了（也就是说用户在搜索框输入了东西）这里就把当前也是设置为1
        this.pagination.page=1;//同时这里改了，下面监控的方法也会自动触发
      },
      pagination: {//监听分页对象
        deep: true,
        handler() {
          this.loadBrands();
        }
      }
    },
    methods: {
      //查询品牌数据的方法
      loadBrands() {
        //显示进度条
        this.loading = true;
        this.$http.get("/item/brand/page", {
          params: {
            //搜索条件
            key: this.key, //品牌名字
            page: this.pagination.page, //得到vue帮我们封装好的分页信息：当前页
            rows: this.pagination.rowsPerPage,
            sortBy: this.pagination.sortBy, //排序的字段
            desc: this.pagination.descending, //是否降序
          }
        }).then(resp => {  //返回成功后的回调函数
          // console.log(resp);
          this.brands = resp.data.items;
          this.totalBrands = resp.data.total;
          this.loading = false;
        })
      }
    }
  }
</script>

<style scoped>

</style>
